<title>菜单列表</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>系统管理</cite></a>
    <a><cite>菜单列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-row layui-col-space15">

        <div class="layui-col-md3">
          <div class="layui-card">
            <div class="layui-card-header">左侧树结构</div>
            <div class="layui-card-body user-select" id="demo-tree"></div>
          </div>
        </div>
        <div class="layui-col-md9">
          <div class="layui-card">
            <div class="layui-card-header">右侧表结构</div>
            <div class="layui-card-body">
              <div id="demo-table-1"></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>


<script>
    layui.use(['admin', 'table', 'form'], function(){
        var table = layui.table
            ,form = layui.form
            ,$ = layui.$;
        table.render({
            elem: '#test-table-form'
            ,url:'/sys/role/list'
            ,where: {
                token: layui.data('layuiAdmin').token
            }
            ,cellMinWidth: 80
            ,cols: [[
                {type:'numbers'}
                ,{type: 'checkbox'}
                ,{field:'roleId', title:'ID', width:100, unresize: true, sort: true}
                ,{field:'roleName', title:'角色名'}
                ,{field:'createTime', title:'创建时间'}
            ]]
            ,page: true
        });
        //监听锁定操作
        form.on('checkbox(test-table-lockDemo)', function(obj){
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

            json = table.clearCacheKey(json);
            console.log(json); //当前行数据
        });

    });
</script>